<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <title>旧汽车出库</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <link rel="stylesheet" href="/dist/plugins/webuploader-0.1.5/webuploader.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=e9c5bb62">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=66b457d6">
    <style>
        .table-detail td.td-value2 {
            padding: 1px !important;
            text-align: left !important;
        }

        .td-value2 input {
            box-shadow: inset 1px 1px 4px #333;
            height: 100% !important;
            padding-left: 4px !important;
        }

        .td-value2 select {
            box-shadow: inset 1px 1px 4px #333;
            height: 100% !important;
            padding-left: 4px !important;
        }

        table input {
            border: none;
            width: 100%;
        }

        .div-td-content-more {
            position: absolute;
            height: auto;
            z-index: 999;
            line-height: 20px;
            background-color: #d3e8fd;
            padding: 8px 6px;
            border: 1px solid #e8e8ea;
            display: none;
        }

        .div-td-content-more i {
            width: 15px;
            height: 12px;
            background: url("/dist/img/more-icon.png");
            position: absolute;
            left: 50px;
            top: -12px;
        }

        td {
            color: #2a8cec;
        }

        td.td-title, td select, td .filename, td.td-module {
            color: #333;
        }

        .lineOne {
            text-align: left;
        }

        .lineOne span {
            max-height: 20px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-align: left;
        }

        input[type=text], input[type=tel], input[type=number], select {
            box-sizing: border-box;
            border-width: 0px;
            border-style: none;
            padding-right: 0px !important;
            padding-top: 0px !important;
            padding-bottom: 0px !important;
            margin-left: 0px !important;
            margin-right: 0px !important;
            margin-top: 0px !important;
            margin-bottom: 0px !important;
            padding-left: 6px;
        }

        input[type=text], input[type=tel], input[type=number], select {
            height: 24px;
            width: 100%;
            border: none;
            outline: none;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .webuploader-pick {
            background: url(/dist/img/fjT1.png) no-repeat 5px center;
            display: block;
            padding: 0 4px;
            height: 22px;
            line-height: 22px;
            padding-left: 15px;
            margin: 0 auto;
            width: 70px;
            margin-top: 6px;
            border-radius: 4px;
        }
        .webuploader-pick-hover{
            color: #fff!important;
            background: url(/dist/img/fjT2.png) no-repeat 5px center;
            background-color: #0F6099;

        }
        #divUploadedFiles{
            /*padding: 4px;*/
            padding-bottom: 0;
        }
        .title{
            background-color: yellow;
            color:black;
        }
    </style>
</head>

<body>
<section class="content" id="app" v-cloak=>
    <iframe id="ifAttach" style="display:none"></iframe>
    <div class="div-td-content-more"><i></i></div>
    <div id="div" style="margin-top: 12px">
        <div style="float: left">
            <div class="box-body no-padding iframeH2" style="overflow: auto;margin-left: -10px;margin-top:-20px"
                 id="scrollDiv">
                <div id="progress" class="wyui-progress"></div>
                <table id="logistics" class="table-detail">

                    <tr class="no-print" id="out">
                        <td colspan="6" class=" no-print title">出库</td>
                    </tr>
                    <tr id="move" class="no-print">
                        <td colspan="6" class=" no-print title">移库</td>
                    </tr>
                    <tr>
                    <tr id="con">
                        <td class="td-title">提货合同</td>
                        <td colspan="5" class="td-value2">
                            <a id="selContract" @click="selContract()" href="javascript:void(0)" class="pull-left"
                               style="margin-left: 40px"><span style="font-size: 14px" id="show">选择合同</span></a>
                            <span id="contract" style="margin-left: -60px"></span>
                            <input id="contractId" type="text" style="display: none">
                        </td>
                    </tr>
                    </tr>
                    <tr>
                        <td style="" class="td-title" name="pickUpAddress">提车地址</td>
                        <td style="display: none" name="oldStock" class="td-title">原库存地</td>
                        <td class="td-value2" style="width: 233px">
                            <input style="width:100%;border: 0px" type="text"
                                   v-model="logisticParmsList.main.pickUpAddress"/>
                        </td>
                        <td style="width: 211px;" class="td-title">联系人</td>
                        <td class="td-value2" style="width: 233px">
                            <input style="width:100%;border: 0px" type="text"
                                   v-model="logisticParmsList.main.pickUpContacts"/>
                        </td>

                        <td style="width: 211px;" class="td-title">电话</td>
                        <td class="td-value2" style="width: 233px">
                            <input style="width: 100%;border: 0px" type="text"
                                   v-model="logisticParmsList.main.pickUpTelephone"/>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 211px;" class="td-title" name="delivery_address">交车地址</td>
                        <td style="width: 211px;display: none" class="td-title" name="refund_address">退库地址</td>
                        <td style="width: 211px;display: none" class="td-title" name="nowStock">新库存地</td>
                        <td class="td-value2" style="width: 233px">
                            <input style="width:100%;border: 0px" type="text"
                                   v-model="logisticParmsList.main.delivery_address"/>
                        </td>
                        <td class="td-title">联系人</td>
                        <td class="td-value2">
                            <input style="width: 100%;border: 0px" type="text"
                                   v-model="logisticParmsList.main.deliveryContacts"/>
                        </td>
                        <td class="td-title">电话</td>
                        <td class="td-value2">
                            <input style="width:100%;border: 0px" type="text"
                                   v-model="logisticParmsList.main.deliveryTelephone"/>
                        </td>
                    </tr>
                    <tr>
                        <td class="td-title">司机证件</td>
                        <td class="td-row2 td-value1" colspan="4">
                            <div id="divUploadedFiles2">
                                <div class="fj-tanzhongStyle "  v-for="(attach,i) in logisticParmsList.certificates">
                                    <b :class="fjStyle(attach.name)"></b>
                                    <div class="name" v-if="attach.name" :title="attach.name" v-on:click="download(attach.url,attach.name)">{{attach.name}}</div>
                                    <div class="down"><a href="javascript:void(0)" class="nui-txt-link" v-on:click="download(attach.url,attach.name)">下载</a></div>
                                    <div class="del" v-if="pageType!='look'&&attach.name"><a href="javascript:void(0)" class="nui-txt-link" @click="deleteFile3(i)" >删除</a></div>
                                    <!--<div class="info">11.35K <span class="nui-txt-suc">上传完成</span></div>-->
                                </div>
                            </div>
                        </td>
                        <td >
                            <div  id="lcertificates" class="rightBorder fj fujian">
                                上传证件
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="td-title">汽车照片</td>
                        <td class="td-row2 td-value1" colspan="4">
                            <div id="divUploadedFiles3">
                                <div class="fj-tanzhongStyle "  v-for="(attach,i) in logisticParmsList.devicePictures">
                                    <b :class="fjStyle(attach.name)"></b>
                                    <div class="name" v-if="attach.name" :title="attach.name" v-on:click="download(attach.url,attach.name)">{{attach.name}}</div>
                                    <div class="down"><a href="javascript:void(0)" class="nui-txt-link" v-on:click="download(attach.url,attach.name)">下载</a></div>
                                    <div class="del" v-if="pageType!='look'&&attach.name"><a href="javascript:void(0)" class="nui-txt-link" @click="deleteFile4(i)" >删除</a></div>
                                    <!--<div class="info">11.35K <span class="nui-txt-suc">上传完成</span></div>-->
                                </div>
                            </div>
                        </td>
                        <td >
                            <div  id="ldevicePictures"
                                 class="rightBorder fj fujian">
                                上传照片
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="td-title">备注</td>
                        <td colspan="5" class="td-value2">
                            <input style="width: 100%;border: 0px" type="text"
                                   v-model="logisticParmsList.main.remark"/>
                        </td>
                    </tr>
                </table>
                <div align="center">
                <input type="button" id="save" class="btn oaBtn btn-sm" @click="save(0)" value="提交申请"
                       style="margin-top: 5px;">

                <input type="button" value="取消" class="btn oaBtn btn-sm" id="getBy" @click=close()
                       style="margin-top: 5px;">
                </div>
            </div>
        </div>

    </div>

</section>

</body>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=0b5caf39"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=0c4d95a9"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script src="/dist/plugins/webuploader-0.1.5/webuploader.min.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script type="text/javascript">
    var api = frameElement.api, W = api.opener;
    Vue.directive('onedate', {
        // 当被绑定的元素插入到 DOM 中时……
        update: function (el, binding) {
            // 聚焦元素
            if (app.pageType != 'add') {
                if (el.value == "NaN.undefined" || el.value == "") {
                    el.value = binding.value
                }
            }
        },
        componentUpdated: function (el, binding) {
            // 聚焦元素
        }
    })
    var app = new Vue({
        el: '#app',
        data: {
            stocks: [],
            fkCompanyId: $.wyui.page.urlParams.fkCompanyId,
            pageType: '',
            sampleId: $.wyui.page.urlParams.sampleId,
            modelName: $.wyui.page.urlParams.modelName,
            state: "",
            logisticParmsList: {
                certificates: [],//司机证件
                devicePictures: [],//设备照片
                drayPictures: [],//板车照片
                main: {
                    id: '',
                    reason: '',
                    trafficDestination: "",
                    trafficStarting: "",
                    transport_company: "",
                    contacts: "",
                    telephone: "",
                    dray_license: "",
                    driver_name: "",
                    driver_tel: "",
                    special_fee: 0,
                    deduction_fee: 0,
                    deduction_remark: "",
                    type: 0,
                    pickUpAddress: "",
                    pickUpContacts: "",
                    pickUpTelephone: "",
                    delivery_address: "",
                    deliveryContacts: "",
                    deliveryTelephone: "",
                    remark: "",
                    sampleId: $.wyui.page.urlParams.sampleId,
                    createUserId: getCurrentUser().id,
                    createUserName: getCurrentUser().name,
                },
            },
            sampleParmsList: {
                attaches: [],//提货信息中附件
                certificates: [],//司机证件
                devicePictures: [],//设备照片
                drayPictures: [],//板车照片
                main: {
                    id: '',
                    state: "",
                    createTime: $.wyui.page.urlParams.createTime
                },
            },
        },
        methods: {
            fjStyle:function(fjName){
                if(fjName){
                    var type=fjName.substring(fjName.lastIndexOf('.') + 1);
                    return 'img fj-'+type
                }
                return 'img'
            },
            selContract: function () {
                $.dialog({
                    content: 'url:contractList.html?modelName=' + $.wyui.page.urlParams.modelName,
                    title: '选择合同',
                    width: 904,
                    height: 665,
                    max: true,
                    min: true,
                    lock: true
                });

            },
            save: function (auditFlag) {
                var that = this;
                if (that.logisticParmsList.main.pickUpTelephone != "") {
                    if (that.logisticParmsList.main.pickUpTelephone.length != 11) {
                        alert("手机号格式不正确");
                        return false;
                    }
                }
                if (that.logisticParmsList.main.deliveryTelephone != "") {
                    if (that.logisticParmsList.main.deliveryTelephone.length != 11) {
                        alert("手机号格式不正确");
                        return false;
                    }
                }
                that.logisticParmsList.main.sampleId = that.sampleId;
                that.logisticParmsList.main.contractId = $("#contractId").val();
                $.wyui.postMethod('/deviceDisplace/outBoundNew.json', trimRN(that.logisticParmsList), function (r) {
                    if (r.records != "") {
                        if ($.wyui.page.urlParams.type == 'out') {
                            alert("出库申请成功，待审核")
                        } else if ($.wyui.page.urlParams.type == 'move') {
                            alert("移库申请成功，待审核")
                        } else {
                            alert("退货申请成功，待审核")
                        }
                        var $iframe = top.findIframeByName("库存管理");
                        $iframe[0].contentWindow.$("#iframeBox")[0].contentWindow.refresh();
                        api.close();
                    } else {
                        alert("出库失败，请重新输入！")
                    }
                });
            },
            close: function () {
                api.close();
            },
            showDatePicker: function (e, index) {
                var that = this;
                WdatePicker({
                    onpicked: function (dp) {
                        return true;
                    }
                });
                $(e.target).blur();
            },
            download: function (attachId, fileName) {
                downloadFile(attachId,fileName)
                return false;
            },
            deleteFile3: function (i) {
                if (window.confirm("确定要删除该附件吗?")) {
                    this.logisticParmsList.certificates.splice(i, 1);
                }
            },
            deleteFile4: function (i) {
                if (window.confirm("确定要删除该附件吗?")) {
                    this.logisticParmsList.devicePictures.splice(i, 1);
                }
            },
            deleteFile5: function (i) {
                if (window.confirm("确定要删除该附件吗?")) {
                    this.logisticParmsList.drayPictures.splice(i, 1);
                }
            },
            fmoney: function (s, n) {
                n = n > 0 && n <= 20 ? n : 2;
                s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
                var l = s.split(".")[0].split("").reverse(), r = s.split(".")[1],
                    t = "";
                for (i = 0; i < l.length; i++) {
                    t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
                }
                return t.split("").reverse().join("") + "." + r;
            },
            strFormat: function (target, data) {
                //此结果为了展示数据
                var value = (target.value).trim();
                value = value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g, '');
                if (!value) {
                    value = 0
                }
                ;
                //此结果为data存入数据
                var dataList = data.split('.');

                if (dataList.length > 0) {
                    if (dataList.length == 1) {
                        this[dataList[0]] = value;
                    }
                    if (dataList.length == 2) {
                        this[dataList[0]][dataList[1]] = value;
                    }
                    if (dataList.length == 3) {
                        this[dataList[0]][dataList[1]][dataList[2]] = value;
                    }
                    if (dataList.length == 4) {
                        this[dataList[0]][dataList[1]][dataList[2]][dataList[3]] = value;
                    }
                    if (dataList.length == 5) {
                        this[dataList[0]][dataList[1]][dataList[2]][dataList[3]][dataList[4]] = value;
                    }
                }
                target.value = this.fmoney(value);
            },
            strFormatF: function (target, data) {
                var value = '';
                var dataList = data.split('.');

                if (dataList.length > 0) {
                    if (dataList.length == 1) {
                        value = this[dataList[0]]
                    }
                    if (dataList.length == 2) {
                        value = this[dataList[0]][dataList[1]]
                    }
                    if (dataList.length == 3) {
                        value = this[dataList[0]][dataList[1]][dataList[2]]
                    }
                    if (dataList.length == 4) {
                        value = this[dataList[0]][dataList[1]][dataList[2]][dataList[3]]
                    }
                    if (dataList.length == 5) {
                        value = this[dataList[0]][dataList[1]][dataList[2]][dataList[3]][dataList[4]]
                    }
                }
                if (!value || value == '0.00') {
                    console.log('获取焦点', value)
                    value = '';
                }
                target.value = value;
            },
        },
        mounted: function () {
            var that = this;
            /*出库类型*/
            var type = $.wyui.page.urlParams.type;
            /*提车地址/原库存地*/
            that.logisticParmsList.main.pickUpAddress = $.wyui.page.urlParams.storeAddress;
            /*查询现库存地*/
            $.wyui.postMethod('/company/getCompanyById.json', {id: $.wyui.page.urlParams.fkCompanyId}, function (r) {
                that.stocks = r.stock;
            })
            /*判断显示内容*/
            if (type == "out") {
                that.logisticParmsList.main.type = 0;
                $("#move").hide();
                $("#return").hide();
            } else if (type == "move") {
                that.logisticParmsList.main.type = 1;
                $("#out").hide();
                $("#return").hide();
                $("#con").hide();
                $("td[name='pickUpAddress']").hide();
                $("td[name='delivery_address']").hide();
                $("td[name='oldStock']").show();
                $("td[name='nowStock']").show();
            }
            else if (type == "return") {
                that.logisticParmsList.main.type = 2;
                $("td[name='delivery_address']").hide();
                $("td[name='refund_address']").show();
                $("#con").hide();
                $("#move").hide();
                $("#out").hide();
            }
            setTimeout(function () {
                $(".fj").each(function () {
                    var demo = $(this);
                    var name = demo.attr("id");
                    var nameValue = name + "Name";
                    var uploader = WebUploader.create({
                        // 选完文件后，是否自动上传。
                        auto: true,
                        // swf文件路径
                        swf: "/statics/plugin/webuploader-0.1.5/Uploader.swf",
                        // 文件接收服务端。
                        server: server.fjIp + "/attach/uploadFile.json",
                        // 选择文件的按钮。可选。
                        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                        pick: '#' + demo.attr("id"),
                        duplicate: true
                    });
                    // 文件上传过程中创建进度条实时显示。
                    uploader.on('uploadProgress', function (file, percentage) {
                        var $li = $('#' + file.id),
                            $percent = $li.find('.progress span');
                        // 避免重复创建
                        if (!$percent.length) {
                            $percent = $('<p class="progress"><span></span></p>')
                                .appendTo($li)
                                .find('span');
                        }
                        $percent.css('width', percentage * 100 + '%');
                    });
                    uploader.on("uploadStart", function () {
                        $("#progress").show();
                    });
                    uploader.on("uploadComplete", function () {
                        $("#progress").hide();
                    });
                    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
                    uploader.on('uploadSuccess', function (file, response) {
                        if (name == 'lcertificates') {
                            that.logisticParmsList.certificates.push({
                                id: response.id,
                                name: response.name,
                                url: response.url
                            });
                        } else if (name == 'ldevicePictures') {
                            that.logisticParmsList.devicePictures.push({
                                id: response.id,
                                name: response.name,
                                url: response.url
                            });
                        } else if (name == 'ldrayPictures') {
                            that.logisticParmsList.drayPictures.push({
                                id: response.id,
                                name: response.name,
                                url: response.url
                            });
                        } else {
                            var nameValue = name + "Name";
                            var urlValue = name + "Url";
                            that.sampleParmsList.main[nameValue] = response.name;
                            that.sampleParmsList.main[urlValue] = response.url;
                            $("#" + name).hide();
                        }
                    });
                    // 文件上传失败，显示上传出错。
                    uploader.on('uploadError', function (file) {
                        alert("上传失败！");
                    });
                });
            }, 10);
        }

    })
</script>
<script>
    function getParam(id, contractNo, buyer) {
        $("#show").text("重新选择")
        $("#contractId").val(id);
        var msg = contractNo + "-" + buyer;
        $("#contract").text(msg);
        /* $("#selContract").hide();*/
    }
</script>
</html>